<template>
  <div>
    <validator name="otherMethodForm">
      <form role="form" name="Form" class="col-md-4 col-md-offset-4 form-margin">
        <div class="form-group">
          <label>请选择验证方式：</label>
        </div>
        <div class="form-group">
          <div class="radio" v-show="account.forgetMobileTemp">
            <label><input type="radio" name="method" value="mobile" v-model="state.newMethod" initial="off" detect-change="off" v-validate:method="{'required':true} ">通过安全手机接收验证短信</label>
          </div>
          <div class="radio"  v-show="account.forgetEmailTemp">
            <label><input type="radio" name="method" value="email" v-model="state.newMethod" initial="off" detect-change="off" v-validate:method>通过安全邮箱接收验证码</label>
          </div>
          <div class="radio"  v-show="account.forgetQeustionTemp">
            <label><input type="radio" name="method" value="question" v-model="state.newMethod"  initial="off" detect-change="off" v-validate:method>回答设置的密保问题</label>
          </div>
          <div>
            <error-template v-show="$otherMethodForm.method.required">{{$otherMethodForm.method.required}}</error-template>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-primary form-control" v-on:click.prevent="choose">下一步</button>
        </div> 
        <div class="form-group">
          <button class="btn btn-default form-control" v-on:click.prevent="goBack">返回</button>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
export default {
  props: {
    account: {
      required: true,
      type: Object
    },
    state: {
      required: true,
      type: Object
    }
  },
  methods: {
    choose() {
      let self = this
      this.$validate(() => {
        if (self.$otherMethodForm.invalid) {
          return
        }
        this.$dispatch('setMethod', this.state.newMethod)
        this.$dispatch('setStep', 2)
      })
    },
    goBack() {
      this.$dispatch('setMethod', this.state.preMethod)
    }
  },
  ready() {
  }
}
</script>